<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="loginUser" class="com.zzn.bookManage.pojo.User" scope="session"/>
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>用户设置</title>
  <%@ include file="head.jsp"%>
</head>
<body>
<div id="app">
  <div class="container">
    <div class="row primary-bg align-items-center">
      <div class="col-3">
        <img src="./assets/logo.png" class="m-auto card-img-top" alt="logo" style="width: 80px">
      </div>
      <div class="col-auto ml-auto">
        <span>Hello! <strong><%=loginUser.getNickname()%></strong></span>
        <form action="${pageContext.request.contextPath}/userLogout" method="post" style="display: inline">
          <button type="submit" class="btn btn-sm btn-info ml-4">退出登录</button>
        </form>
      </div>
    </div>
    <div class="row">
      <!--      侧边栏-->
      <div class="col-md-2 col-sm-1 secondary-bg px-0" style="height: 800px">
        <div class="btn-group-vertical full-width" role="group" aria-label="Basic example">
          <a href="${pageContext.request.contextPath}/list?page=1" class="full-width">
            <button type="button" class="btn btn-my-primary full-width">首页</button>
          </a>
          <button type="button" class="btn full-width btn-my-primary-active" autofocus>用户设置</button>
          <!--          <a href="userManage.html" class="full-width">-->
          <!--            <button type="button" class="btn btn-my-primary full-width">用户管理</button>-->
          <!--          </a>-->
        </div>
      </div>
      <div class="col-md-10 col-sm-11 " style="overflow: auto">
        <div class="card my-2">
          <div class="card-body">
            <form class="" action="${pageContext.request.contextPath}/changeInfo" method="post">
              <div class="form-row align-items-center">
                <div class="col-10">
                  <label for="nickname">用户昵称</label>
                  <input
                      class="form-control"
                      id="nickname"
                      name="nickname"
                      required
                      maxlength="16"
                      v-model="nickname"
                  />
                  <small class="form-text text-muted">{{nicknameLength}}/16</small>
                </div>
                <div class="col-2">
                  <button type="submit" class="justify-content-end btn btn-sm btn-primary">修改昵称</button>
                </div>
              </div>
            </form>
            <hr/>
            <form action="${pageContext.request.contextPath}/changePassword" method="post">
              <div class="form-row align-items-center">

                <div class="col-5">
                  <label for="oldpassword">旧密码</label>
                  <input
                      class="form-control"
                      id="oldpassword"
                      name="oldpassword"
                      required
                      maxlength="16"
                      v-model="oldPassword"
                  />
                  <small class="form-text text-muted">{{oldPasswordLength}}/16</small>
                </div>
                <div class="col-5">
                  <label for="newpassword">新密码</label>
                  <input
                      class="form-control"
                      id="newpassword"
                      name="newpassword"
                      required
                      maxlength="16"
                      v-model="newPassword"
                  />
                  <small class="form-text text-muted">{{newPasswordLength}}/16</small>
                </div>
                <div class="col-2">
                  <button type="submit" class="justify-content-end btn btn-sm btn-primary">修改密码</button>
                </div>
              </div>
            </form>
          </div>
        </div>

        <%!
          String msg;
        %>
        <%
          request.setCharacterEncoding("UTF-8");
          msg = (String) request.getAttribute("msg");
          if (msg != null && !"".equals(msg)) {
        %>

        <div class="alert alert-danger alert-dismissible fade show mt-5" role="alert">
          <span><%=msg%></span>
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <%
          }
        %>

      </div>
    </div>
  </div>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            oldPassword:'',
            newPassword:'',
            nickname:'',
        },
        methods: {
        },
        computed: {
            nicknameLength: function () {
                return this.nickname.length
            },
            oldPasswordLength: function () {
                return this.oldPassword.length
            },
            newPasswordLength: function () {
                return this.newPassword.length
            },
        },
    })
</script>
</body>
</html>
